﻿.form-check > .form-check-input.form-check-input-pointer,
.form-check > .form-check-label.form-check-label-pointer,
.custom-checkbox > .custom-control-input.custom-control-input-pointer,
.custom-checkbox > .custom-control-label.custom-control-label-pointer,
.custom-switch > .custom-control-input.custom-control-input-pointer,
.custom-switch > .custom-control-label.custom-control-label-pointer {
    cursor: pointer;
}

.form-control-plaintext {
    &.form-control-xs,
    &.form-control-md,
    &.form-control-xl {
        padding-right: 0;
        padding-left: 0;
    }
}

.form-control-xs {
    height: $input-height-xs;
    padding: $input-padding-y-xs $input-padding-x-xs;
    font-size: $input-font-size-xs;
    line-height: $input-line-height-xs;
    border-radius: $input-border-radius-xs;
}

.form-control-md {
    height: $input-height-md;
    padding: $input-padding-y-md $input-padding-x-md;
    font-size: $input-font-size-md;
    line-height: $input-line-height-md;
    border-radius: $input-border-radius-md;
}

.form-control-xl {
    height: $input-height-xl;
    padding: $input-padding-y-xl $input-padding-x-xl;
    font-size: $input-font-size-xl;
    line-height: $input-line-height-xl;
    border-radius: $input-border-radius-xl;
}

.custom-select-xs {
    height: $custom-select-height-xs;
    padding-top: $custom-select-padding-y-xs;
    padding-bottom: $custom-select-padding-y-xs;
    padding-left: $custom-select-padding-x-xs;
    font-size: $custom-select-font-size-xs;
}

.custom-select-md {
    height: $custom-select-height-md;
    padding-top: $custom-select-padding-y-md;
    padding-bottom: $custom-select-padding-y-md;
    padding-left: $custom-select-padding-x-md;
    font-size: $custom-select-font-size-md;
}

.custom-select-xl {
    height: $custom-select-height-xl;
    padding-top: $custom-select-padding-y-xl;
    padding-bottom: $custom-select-padding-y-xl;
    padding-left: $custom-select-padding-x-xl;
    font-size: $custom-select-font-size-xl;
}

.input-group {
    > .b-numeric:not(:last-child) > input,
    > .flatpickr-wrapper:not(:last-child) > input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    > .b-numeric:not(:first-child) > input,
    > .flatpickr-wrapper:not(:first-child) > input {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.input-group-xs > .form-control:not(textarea),
.input-group-xs > .custom-select,
.input-group-xs > .b-numeric > input {
    height: $input-height-xs;
}

.input-group-xs > .form-control,
.input-group-xs > .custom-select,
.input-group-xs > .input-group-prepend > .input-group-text,
.input-group-xs > .input-group-append > .input-group-text,
.input-group-xs > .input-group-prepend > .btn,
.input-group-xs > .input-group-append > .btn,
.input-group-xs > .b-numeric > input {
    padding: $input-padding-y-xs $input-padding-x-xs;
    font-size: $input-font-size-xs;
    line-height: $input-line-height-xs;
    border-radius: $input-border-radius-xs;
}

.input-group-sm > .b-numeric > input {
    height: $input-height-sm;
}

.input-group-sm > .b-numeric > input {
    padding: $input-padding-y-sm $input-padding-x-sm;
    font-size: $input-font-size-sm;
    line-height: $input-line-height-sm;
    border-radius: $input-border-radius-sm;
}

.input-group-md > .form-control:not(textarea),
.input-group-md > .custom-select,
.input-group-md > .b-numeric > input {
    height: $input-height-md;
}

.input-group-md > .form-control,
.input-group-md > .custom-select,
.input-group-md > .input-group-prepend > .input-group-text,
.input-group-md > .input-group-append > .input-group-text,
.input-group-md > .input-group-prepend > .btn,
.input-group-md > .input-group-append > .btn,
.input-group-md > .b-numeric > input {
    padding: $input-padding-y-md $input-padding-x-md;
    font-size: $input-font-size-md;
    line-height: $input-line-height-md;
    border-radius: $input-border-radius-md;
}

.input-group-lg > .b-numeric > input {
    height: $input-height-lg;
}

.input-group-lg > .b-numeric > input {
    padding: $input-padding-y-lg $input-padding-x-lg;
    font-size: $input-font-size-lg;
    line-height: $input-line-height-lg;
    border-radius: $input-border-radius-lg;
}

.input-group-xl > .form-control:not(textarea),
.input-group-xl > .custom-select,
.input-group-xl > .b-numeric > input {
    height: $input-height-xl;
}

.input-group-xl > .form-control,
.input-group-xl > .custom-select,
.input-group-xl > .input-group-prepend > .input-group-text,
.input-group-xl > .input-group-append > .input-group-text,
.input-group-xl > .input-group-prepend > .btn,
.input-group-xl > .input-group-append > .btn,
.input-group-xl > .b-numeric > input {
    padding: $input-padding-y-xl $input-padding-x-xl;
    font-size: $input-font-size-xl;
    line-height: $input-line-height-xl;
    border-radius: $input-border-radius-xl;
}

.input-group-xs > .custom-select,
.input-group-md > .custom-select,
.input-group-xl > .custom-select {
    padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
}


// Prepend and append rounded corners
//
// These rulesets must come after the sizing ones to properly override sm and lg
// border-radius values when extending. They're more specific than we'd like
// with the `.input-group >` part, but without it, we cannot override the sizing.


.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-prepend:first-child > .dropdown > .btn:not(:last-child).dropdown-toggle,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append:last-child > .dropdown > .btn:not(:last-child).dropdown-toggle,
.input-group > .input-group-append:last-child > .dropdown > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group {
    > div.flatpickr-wrapper {
        > .form-control,
        > .form-control-plaintext {
            position: relative;
            flex: 1 1 auto;
            width: 1%;
            min-width: 0;
            margin-bottom: 0;
        }
    }
}

@mixin checkbox($size, $width, $height, $line-height, $padding-left) {
    .custom-control.custom-checkbox {
        > .custom-control-input.custom-control-input-#{$size} {
            + .custom-control-label::before,
            + .custom-control-label::after {
                width: $width;
                height: $height;
            }

            + .custom-control-label {
                line-height: $line-height;
                padding-left: $padding-left;
            }
        }
    }
}

@include checkbox('xs', .7rem, .7rem, 'normal', 0px);
@include checkbox('sm', .8rem, .8rem, 'normal', 0px);
@include checkbox('md', 1.25rem, 1.25rem, 1.7rem, 3px);
@include checkbox('lg', 1.55rem, 1.55rem, 2rem, 6px);
@include checkbox('xl', 1.85rem, 1.85rem, 2.5rem, 10px);

@mixin radio($size, $radio-size, $line-height, $padding-left) {
    /* $padding-top: (($radio-size - ($radio-size - ($radio-size / 2))) / 2);
    $padding-left: $radio-size / 2;*/

    .custom-control.custom-radio {
        > .custom-control-input.custom-control-input-#{$size} {
            + .custom-control-label::before,
            + .custom-control-label::after {
                width: $radio-size;
                height: $radio-size;
            }

            + .custom-control-label {
                line-height: $line-height;
                padding-left: $padding-left;
            }
        }
    }
}

@include radio('xs', .7rem, normal, 0px);
@include radio('sm', .8rem, normal, 0px);
@include radio('md', 1.25rem, 1.7rem, 3px);
@include radio('lg', 1.55rem, 2rem, 6px);
@include radio('xl', 1.85rem, 2.5rem, 10px);

select[readonly] {
    pointer-events: none;

    option,
    optgroup {
        display: none;
    }
}

.b-numeric {
    position: relative;
    width: 100%;

    &:hover > .b-numeric-handler-wrap {
        opacity: 1;
    }

    input:disabled, input:read-only {
        + .b-numeric-handler-wrap {
            display: none;
        }
    }
}

.b-numeric-handler-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 100%;
    background: #fff;
    border: 1px solid #d9d9d9;
    opacity: 0;
}

.input-group .b-numeric {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
}

.b-numeric-handler-wrap {
    .b-numeric-handler.b-numeric-handler-down {
        border-top: 1px solid #d9d9d9;
    }
}

.b-numeric-handler {
    position: relative;
    display: flex;
    width: 100%;
    height: 50%;
    overflow: hidden;
    color: rgba(0,0,0,.45);
    font-weight: 700;
    line-height: 0;
    align-items: center;
    justify-content: center;

    &.btn {
        padding: 0;
    }
}

.form-control + .b-numeric-handler-wrap {
    font-size: $input-font-size;
    border-top-right-radius: $input-border-radius;
    border-bottom-right-radius: $input-border-radius;
}

.form-control-xs + .b-numeric-handler-wrap {
    font-size: $input-font-size-xs;
    border-top-right-radius: $input-border-radius-xs;
    border-bottom-right-radius: $input-border-radius-xs;

    > .b-numeric-handler.btn {
        font-size: $input-font-size-xs;
    }
}

.form-control-sm + .b-numeric-handler-wrap {
    font-size: $input-font-size-sm;
    border-top-right-radius: $input-border-radius-sm;
    border-bottom-right-radius: $input-border-radius-sm;

    > .b-numeric-handler.btn {
        font-size: $input-font-size-sm;
    }
}

.form-control-md + .b-numeric-handler-wrap {
    font-size: $input-font-size-md;
    border-top-right-radius: $input-border-radius-md;
    border-bottom-right-radius: $input-border-radius-md;

    > .b-numeric-handler.btn {
        font-size: $input-font-size-md;
    }
}

.form-control-lg + .b-numeric-handler-wrap {
    font-size: $input-font-size-lg;
    border-top-right-radius: $input-border-radius-lg;
    border-bottom-right-radius: $input-border-radius-lg;

    > .b-numeric-handler.btn {
        font-size: $input-font-size-lg;
    }
}

.form-control-xl + .b-numeric-handler-wrap {
    font-size: $input-font-size-xl;
    border-top-right-radius: $input-border-radius-xl;
    border-bottom-right-radius: $input-border-radius-xl;

    > .b-numeric-handler.btn {
        font-size: $input-font-size-xl;
    }
}

.custom-file-label {
    overflow: hidden;
}

input[readonly][type=range],
input[readonly="readonly"][type=range] {
    pointer-events: none;

    &::-webkit-slider-thumb {
        pointer-events: none;
    }

    &::-moz-range-thumb {
        pointer-events: none;
    }

    &::-ms-thumb {
        pointer-events: none;
    }
}

.focus-trap {
    display: contents;
}

.form-label-required:after {
    content: " *";
    color: var(--b-theme-danger, $danger);
}